<template>
	<view>
		<!-- #ifdef MP -->
		<!-- 小程序搜索框, 不要少了 ref="searchBar" 后面要用 -->
		<!-- 注意：navBack() 不要少了括号，不然后退不了（mixin.js定义了） -->
		<uni-search-bar :focus="focus" ref="searchBar" radius="100" placeholder="搜索你想要的内容" clearButton="auto"
			cancelButton="always" @confirm="doSearch" @cancel="navBack()" />
		<!-- #endif -->
		<!-- 热门历史关键词提示组件 -->
		<keyword @doSearch="doSearch" v-if="!searched"></keyword>
	</view>
</template>

<script>
	import keyword from './components/keyword.vue'
	// 1. 当前页面实例变量，声明外面提高性能
	let currentWebview = null
	export default {
		components: {
			keyword
		},
		data() {
			return {
				params: null, // 其他页面跳转到此页面带上的参数,
				content: null, //搜索内容
				focus: false, //搜索框获取焦点
				searched: false, //是否搜索过，搜索过隐藏keyword组件内容
			}
		},

		onLoad(option) { // option接收其他页面传递过来的参数
			// #ifdef APP-PLUS
			currentWebview = this.$mp.page.$getAppWebview()
			// #endif

			// 获取其他页面跳转过来带的参数，
			if (option.params) {
				// 转换对象
				this.params = JSON.parse(option.params)
				console.log('params', this.params)
				// 有参数，则开始搜索
				this.doSearch()
			} else {
				// #ifdef APP-PLUS
				//点击搜索框获取焦点, 因为分类页会跳转到此页面后不用获取焦点，所以不在pages.json
				中开启自动获取焦点
				currentWebview.setTitleNViewSearchInputFocus(true)
				// #endif

				// #ifdef MP
				// 页面加载即获取焦点，真机测试才有效 +++
				this.focus = true
				// #endif
			}
		},
		// 监听原生导航按钮事件
		onNavigationBarButtonTap(e) {
			// 取消按钮
			if (e.index === 0) {
				uni.navigateBack()
			}
		},

		// 原生搜索框，输入内容实时变化事件
		onNavigationBarSearchInputChanged(e) {
			//console.log('实时监听输入内容', e.text)
			this.content = e.text
		},

		// 针对原生搜索框，用户点击软键盘上的“搜索”按钮时触发
		onNavigationBarSearchInputConfirmed(e) {
			// console.log('用户点击软键盘上的“搜索”按钮', e.text)
			// #ifdef APP-PLUS
			// 失去焦点，收起键盘（有时不会收起）
			currentWebview.setTitleNViewSearchInputFocus(false)
			// #endif
			this.doSearch()
		},

		methods: {
			// 搜索 ++++++++++
			doSearch(obj) {
				// obj有数据，则获取
				this.content = obj && obj.value ? obj.value : this.content

				// 标识搜索过，隐藏keyword.vue组件内容
				this.searched = true

				// #ifdef MP
				// 传递给小程序 搜索框, 注意上面取 `ref="searchBar"`
				this.$refs.searchBar.searchVal = this.content
				// #endif

				// 关键字保存本地, 用于历史搜索
				this.storageHistory()

				uni.showLoading()

			},
			// 关键字保存本地 ++++++++++++++
			storageHistory() {
				const key = 'history_list'
				uni.getStorage({
					key, // 等价于 key: key,
					success: (res) => { //注意箭头函数
						// console.log('获取成功', res.data);
						// 查询到原历史记录，当前输入的是否存在，不存在添加到第1个元素，存在不添加
			 		this.content && res.data.indexOf(this.content) < 0 &&
							res.data.unshift(this.content)
						// 保存到历史记录
						uni.setStorageSync(key, res.data)
					},
					fail: (error) => { //注意箭头函数
						// 没有历史数据。
						// 当前有输入内容，直接保存，注意是数组
						this.content && uni.setStorageSync(key, [this.content])
					}
				})
			}
		},

	}
</script>

<style lang="scss">
	/* 不要少了scss */
	page {
		background-color: #fff;
	}

	.search-container {
		width: 750rpx;
		/* 全屏，不然后面`下拉筛选粘组件`粘顶会失效 */
		margin: 0;
		padding: 0;
	}
</style>
